<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false"
             title="客户成交状态" width="400px" @close="handleCancel">
    <template #default>
      <div class="handle-box">
        <flexbox class="handle-item" align="stretch">
          <div class="handle-item-name" style="margin-top: 8px;">成交状态：</div>
          <el-select v-model="status" class="handle-item-content">
            <el-option v-for="item in options" :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </flexbox>
      </div>
    </template>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button v-debounce="handleConfirm" type="primary">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {crmCustomerDealStatusAPI} from '/src/api/crm/customer.js'
import {watch, ref} from "vue"
import {ElMessage} from "element-plus"

defineOptions({
  /** 客户管理  成交状态 操作*/
  name: 'DealStatusHandle',
})

const props = defineProps({
  value: Number,
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  crmType: {
    type: String,
    default: ''
  },
  // 勾选数据
  selectionList: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const status = ref(1)
const options = ref([{
  label: '已成交',
  value: 1
}, {
  label: '未成交',
  value: 0
}])

watch(() => props.value, (val) => {
  if (typeof val != 'undefined') {
    status.value = val == 0 ? 1 : 0
  }
}, {
  immediate: true
})

const emits = defineEmits(['update:visible', 'handle'])

/**
 * 取消选择
 */
function handleCancel() {
  // 重置状态
  status.value = 1
  emits('update:visible', false)
}

/**
 * 点击确定
 */
function handleConfirm() {
  const actionIds = props.selectionList.map(item => item[props.crmType + 'Id']).join(',')
  const params = {
    dealStatus: status.value
  }
  params.ids = actionIds
  console.log("params", params)
  crmCustomerDealStatusAPI(params).then(res => {
    ElMessage.success({message: '操作成功'})
    emits('handle', {type: 'deal_status'})
    handleCancel()
  }).catch((r) => {
    console.log("r", r)
  })
}
</script>

<style lang="scss" scoped>
.handle-box {
  color: #333;
  font-size: 12px;
}

.handle-item {
  padding-bottom: 15px;

  .handle-item-name {
    flex-shrink: 0;
    width: 90px;
  }

  .handle-item-content {
    flex: 1;
  }
}

.handle-bar {
  position: relative;
  margin-top: 10px;
  height: 30px;

  button {
    float: right;
    margin-right: 10px;
  }
}
</style>
